@use '@/style/mixin' as *;

/** $description: 左侧菜单样式 */
$menuItemHeight: var(--menu-item-height); //pxToRem(50); // 菜单项高度
$menuFontSize: var(--menu-font-size); //pxToRem(14); // 文字大小
$menuIconWidth: var(--menu-icon-width); //pxToRem(20); // icon大小
$menuIconMarginRight: pxToRem(8); // icon右边距

/** $description: 左侧菜单样式 */
$menuPadding: pxToRem(6); // 菜单内边距
$menuLeftWidth: var(--menu-left-width); //pxToRem(200); // 菜单宽度
$menuCollapseWidth: var(--menu-left-collapse-width); //pxToRem(62); // 菜单折叠后宽度
$iconLeftPadding: (
    calc(($menuCollapseWidth - $menuPadding * 2 - $menuIconWidth) / 2)
);

/** $description: 顶部菜单样式 */
$menuHeaderWidth: var(--header-menu-width); //140px; // 菜单最大宽度

@mixin textClass($t, $w) {
    span {
        #{$t}: $w;
        height: $menuItemHeight;
        line-height: $menuItemHeight;
        overflow: hidden;
        text-overflow: ellipsis;
        visibility: visible;
        font-size: $menuFontSize;
    }

    .el-sub-menu__icon-arrow {
        right: 0;
        top: 30%;
        font-size: 16px;
        font-weight: bold;
    }
}

/* 菜单当前项样式 */
@mixin textColorClass($colorText: var(--menu-color-text), $colorHoverGb: var(--menu-color-hover-bg)) {
    & {
        color: $colorText;
        background-color: transparent;
        border-radius: pxToRem(6);
    }

    &:hover {
        color: var(--menu-color-hover-text);
        background-color: $colorHoverGb;
    }

    &.is-active {
        background-color: var(--menu-color-active-bg);
        color: var(--menu-color-active-text);
    }
}

/* 菜单父级项激活样式 */
@mixin itemColorClass {
    &.is-active {
        >.el-sub-menu__title {
            color: var(--menu-color-active-text);
        }
    }
}

/* 图标样式 */
@mixin iconColorClass {
    .el-icon {
        width: $menuIconWidth;
        margin-right: $menuIconMarginRight;
        font-size: $menuIconWidth;
        margin-top: pxToRem(2);
    }
}

/* 左侧菜单 */
.layout-menu {
    max-width: $menuLeftWidth;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--menu-color-bg);
    box-sizing: content-box;
    transition: width 0.3s ease-in-out;
    box-shadow: 2px 1px 5px 0px #0000000d;
    z-index: 2;

    .el-menu {
        background-color: var(--menu-color-subStyle-bg);
    }

    .el-menu.el-menu--vertical.layout-naviga-menu {
        flex: 1;
        overflow-y: scroll;
        border: none;
        padding: $menuPadding;
        background-color: transparent;

        @include iconColorClass;

        @include scrollBar;

        .el-sub-menu {
            @include itemColorClass;

            .el-sub-menu__title {
                padding-right: pxToRem(30);
                padding-left: calc($iconLeftPadding + var(--el-menu-level) * $iconLeftPadding);
                height: $menuItemHeight;

                @include textClass(width, $menuLeftWidth);
                @include textColorClass;
            }
        }

        .el-menu-item {
            padding-left: calc($iconLeftPadding + var(--el-menu-level) * $iconLeftPadding);
            height: $menuItemHeight;
            border-radius: pxToRem(6);

            .el-menu-tooltip__trigger {
                padding: 0 $iconLeftPadding;
            }

            @include textClass(width, $menuLeftWidth);
            @include textColorClass;
        }
    }

    .el-menu--collapse.el-menu.layout-naviga-menu {
        width: $menuCollapseWidth;

        .el-sub-menu {
            .el-sub-menu__title {
                padding-right: pxToRem(18);
            }
        }
    }

}

/* 左侧弹出菜单 */
.elMenuItemLeft.el-popper.is-light {
    max-width: $menuLeftWidth;
    background-color: var(--menu-color-elMenuItemLeft-bg);
    border: none;

    .el-menu {
        padding: $menuPadding;
        // background-color: transparent;

        @include iconColorClass;

        .el-sub-menu {
            @include itemColorClass;

            .el-sub-menu__title {
                height: 100%;
                padding-right: 30px;
                padding-left: $iconLeftPadding;

                @include textClass(width, $menuLeftWidth);
                @include textColorClass;
            }
        }

        .el-menu-item {
            height: $menuItemHeight;
            padding-left: 0;
            padding-right: 18px;
            border-radius: 6px;

            &>.el-icon {
                margin-left: $iconLeftPadding;
            }

            @include textClass(width, $menuLeftWidth);
            @include textColorClass;

            .textCollapse {
                padding-left: $iconLeftPadding;
            }
        }
    }
}

/* 展开折叠宽度设置 */
.layout-naviga-expansion {
    width: $menuLeftWidth;
}

.layout-naviga-collapse {
    width: $menuCollapseWidth;
}

.layout-header-center {
    height: 100%;
    flex: 1;
    min-width: 0;

    .el-menu--horizontal {
        border: none;
    }

    .el-menu.el-menu--horizontal {
        height: 98%;
        background-color: transparent;
        border-bottom: none;

        @include iconColorClass;

        .el-menu-item {
            max-width: $menuHeaderWidth;
            padding: 0 8px;
            background-color: transparent;
            color: var(--header-menu-color-text);

            &:not(.is-disabled):focus {
                color: var(--header-menu-color-text);
                background-color: transparent;
            }

            &:hover {
                color: var(--menu-color-hover-text);
                background-color: transparent;
            }

            &.is-active {
                color: var(--menu-color-active-text);
                border-color: var(--menu-color-active-text);
            }

            @include textClass(max-width, $menuHeaderWidth);
        }

        .el-sub-menu {
            max-width: $menuHeaderWidth;
            color: var(--header-menu-color-text);

            @include itemColorClass;

            .el-sub-menu__title {
                padding: 0 30px 0 8px;

                @include textClass(max-width, $menuHeaderWidth);
                @include textColorClass(var(--header-menu-color-text), transparent);

                & {
                    border-radius: 0;
                }
            }

            &.is-active .el-sub-menu__title {
                border-color: var(--menu-color-active-text);
            }
        }

        .el-sub-menu__hide-arrow {
            .el-sub-menu__title {
                padding: 0 20px 0 20px;
            }
        }
    }
}

.elMenuItemLeft.el-popper.is-light,
.el-popper.is-light {
    .el-menu--horizontal {
        border: none;
    }
}


/* 菜单显隐切换按钮 */
.layout-switch {
    height: var(--menu-switch-height);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--header-right-font-size);
    color: var(--menu-color-text);
    cursor: pointer;

    &:hover {
        color: var(--menu-color-hover-text);
        background-color: var(--menu-color-hover-bg);
    }

    svg {
        transition: transform 0.5s;
    }
}